<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/dep.js"></script>
  <script src="js/watcher.js"></script>
  <script src="js/observer.js"></script>
  <script src="js/compiler.js"></script>
  <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
  <h1>差值表达式</h1>
  {{msg}}
  <span>{{count}}</span>
  <h1>v-text</h1>
  <div v-text="msg"></div>
  <h1>v-html</h1>
  <div v-html="html"></div>
  <h1>v-on</h1>
  <button v-on:click="click($event)">点我</button>
  <h1>v-model</h1>
  <input type="text" v-model="msg" v-on:change="change">
  <input type="text" v-model="count"> 
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello',
      count: 100,
      html: '<p>html</p>',
      person: {
        name: 'zs'
      },
    },
    methods: {
      click(e) {
        console.log('我被点了', this, e);
        this.count++;
      },
      change() {
        console.log('change')
      }
    }
  })
</script>
</html>